<template>
  <div class="search-panel">
    <el-row class="m-header-searchbar">
      <el-col :span="3" class="left">
        <router-link :to="{ name: 'index' }">
          <img src="//s0.meituan.net/bs/fe-web-meituan/10afbf1/img/logo.png" alt="美团" />
        </router-link>

      </el-col>
      <el-col :span="15" class="center">
        <div class="wrapper">
          <el-input v-model="searchWord" placeholder="请输入内容" @focus="focus" @blur="blur" @input="inputSearch">
          </el-input>
          <el-button type="primary" icon="el-icon-search"><i class=""></i></el-button>
          <dl class="hotPlace" v-if="isHotPlace">
            <dt>热门搜索</dt>
            <dd v-for="(item, index) in hotPlaceList" :key="index">
              <router-link :to="{ name: 'goods', params: { name: item } }">{{ item }}</router-link>
            </dd>
            <!-- <dd>
              <router-link to="/">99旅馆连锁</router-link>
            </dd>
            <dd>
              <router-link to="/">尚客优快捷酒店</router-link>
            </dd>
            <dd>
              <router-link to="/">7天连锁酒店</router-link>
            </dd> -->
          </dl>

          <dl class="searchList" v-if="isSearchList">
            <dd v-for="(item, index) in searchList" :key="index">
              <router-link :to="{ name: 'goods', params: { name: item } }">{{ item }}</router-link>
            </dd>
            <!-- <dd>
              <router-link to="/">火锅自助餐</router-link>
            </dd>
            <dd>
              <router-link to="/">火锅 重庆</router-link>
            </dd> -->
          </dl>
        </div>
        <p class="suggest">
          <a href="#" v-for="(item, index) in suggestList" :key="index">{{ item }}</a>
          <!-- <a href="#">京东第一温泉度假村</a>
          <a href="#">99旅馆连锁</a>
          <a href="#">尚客优快捷酒店</a>
          <a href="#">7天连锁酒店</a> -->
        </p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import api from '@/api/index.js'
export default {
  name: 'searchBar',
  data () {
    return {
      searchWord: '',
      isFocus: false,
      hotPlaceList: [],
      searchList: ['火锅', '火锅自助餐', '火锅 重庆'],
      suggestList: []
      // suggestList: ['京东第一温泉度假村', '99旅馆连锁', '尚客优快捷酒店', '7天连锁酒店']
    }
  },
  created () {
    api.getSearchHotWord().then(res => {
      this.hotPlaceList = res.data.data
      this.suggestList = res.data.data
    })
  },
  computed: {
    isHotPlace: function () {
      return this.isFocus && !this.searchWord
    },
    isSearchList: function () {
      return this.isFocus && this.searchWord
    }
  },
  methods: {
    focus () {
      this.isFocus = true
    },
    blur () {
      const self = this
      setTimeout(function () {
        self.isFocus = false
      }, 500)
    },
    inputSearch () {
      api.getSearchWords().then(res => {
        const val = this.searchWord
        this.searchList = res.data.data.list.filter((item, index) => {
          return item.indexOf(val) > -1
        })
      })
    }
  }

}
</script>

<style lang="scss">
@import "@/assets/css/public/header/search.scss";
</style>
